<template>
	<view>
		<!-- 1，发布人信息 -->
		<view class="con">
			<view class="con-title">
				<view class="con-title-img">
					<image :src="reqData.releaseUserHead"></image>
				</view>
				<view class="con-title-center">
					<view class="name">
						<text>{{reqData.releaseUserName}}</text>
					</view>
					<view class="address">
						<text>{{reqData.address}}</text>
					</view>
				</view>
			</view>
			<view class="con-price">
				<text>￥：{{reqData.price}}</text>
			</view>
		</view>
		<!-- 2，商品描述 -->
		<view class="con">
			<view>用户描述：</view>
			<text>{{reqData.detail}}</text>
		</view>
		<!-- 3，商品图片 -->
		<view class="con">
			<view class="con-detail-imgs" v-for="(item,index) in reqData.imgs.split(',')" :key="index">
				<image :src="item" mode="widthFix"></image>
			</view>
		</view>

		<!-- 4，底部按钮 -->
		<view class="bottom">
			<view class="left-btn" @click="gotoChat">
				<view class="btn-img">
					<image :src="chatImg"></image>
				</view>
				<view class="btn-text">
					<text>私聊</text>
				</view>
			</view>
			<view class="right-btn" @click="showOrder">
				<text>购买商品</text>
			</view>
		</view>

		<view class="bottom-zw"></view>

		<!-- 5，弹出框 -->
		<confirm-animation @paymentOrderClick="paymentOrderClick" @display="display" :share="isShow"
			:orderAllPrice="reqData.price"></confirm-animation>

		<!-- 6，余额支付框 -->
		<pay-pop txt="支付密码" :pwdlength="6" ref="pay_pop" @pwd_e="pwdSend"></pay-pop>

	</view>
</template>

<script>
	//import confirmAnimation from '@/components/content/my-confirm/my-confirm.vue'
	import confirmAnimation from '@/subpkg/main/my/release/common/my-confirm.vue'
	import payPop from '@/components/apk/pay-pop/pay-pop.vue'

	import {
		placeAnOrder,
		placeAnOrderByAmount
	} from '@/api/http/main/release/dynamic.js'

	import {
		getPayOrderInfo,
		insert,
		queryBalance
	} from '@/api/http/main/my/pay.js'

	import {
		userRechargeOrder
	} from '@/api/http/main/my/zfbPay.js'

	export default {
		components: {
			confirmAnimation,
			payPop
		},
		data() {
			return {
				reqData: {},
				chatImg: require('@/static/img/main/home/chat.svg'),
				isShow: false
			}
		},
		methods: {
			showOrder() {
				//判断用户是否登录
				this.$isLoginByVisitor()
				if (!uni.getStorageSync('isVisitorLogin')) {
					return
				}

				//判断是否实名认证 如果没有实名认证无法下单
				if (!uni.getStorageSync('identifyCheck')) {
					return uni.$showMsg('请先进行实名认证！')
				}

				this.isShow = true
			},
			paymentOrderClick(e) {
				//发起支付
				if (e == 'wx') {
					return uni.$showMsg('微信支付敬请期待！')
				}

				if (e == 'ye') {
					this.isShow = false
					return this.amountPay();
				}

				//console.log(this.reqData)
				var that = this

				userRechargeOrder(this.reqData.price, this.reqData.id).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//获取支付参数
					var orderInfo = res.data.busInfo
					
					uni.requestPayment({
						provider: 'alipay', //支付宝支付
						orderInfo: orderInfo,
						success(e) {
							uni.$showMsg('下单成功')
							uni.switchTab({
								url: '/pages/main/cart/cart'
							})
						},
						fail(e) {
							console.log('fail', e)
							return uni.$showMsg('取消下单！');
						}
					})
				})


				/* getPayOrderInfo(this.reqData.price).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//获取支付参数
					var orderInfo = res.data.busInfo

					uni.requestPayment({
						provider: 'alipay', //支付宝支付
						orderInfo: orderInfo,
						success(e) {

							var reqPlaceAnOrderObject = {
								releaseDynamicId: that.reqData.id,
								orderState: '2', //已下单
								state: '2' //用户已下单
							}
							placeAnOrder(reqPlaceAnOrderObject).then(resData => {
								if (resData.data.pubInfo.code !== 0) {
									return uni.$showMsg(resData.data.pubInfo.message);
								}

								//存入数据库用户充值记录
								insert(that.reqData.price, '支付宝:闲置下单', '1', that.reqData
									.releaseUserId).then(
									result => {
										if (result.data.pubInfo.code !== 0) {
											return uni.$showMsg(result.data.pubInfo.message);
										}
										console.log('历史记录成功')
										uni.$showMsg('下单成功')
										uni.switchTab({
											url: '/pages/main/cart/cart'
										})
									})



								//return uni.$showMsg('充值成功');
							})
						},
						fail(e) {
							console.log('fail', e)
							return uni.$showMsg('取消下单！');
						}
					})

				}) */

			},
			display() {
				this.isShow = false
			},

			//余额购买
			amountPay() {
				var that = this;
				//查询用户余额
				queryBalance().then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//查询余额
					var balance = res.data.busInfo

					var reqAmount = parseFloat(this.reqData.price)
					if (reqAmount > balance) {
						return uni.$showMsg('您的余额不足！请先充值');
					}

					//输入密码
					that.$refs.pay_pop.Open()

				})
			},
			pwdSend(e) {
				var reqPlaceAnOrderObject = {
					releaseDynamicId: this.reqData.id,
					orderState: '2', //已下单
					state: '2', //用户已下单
					pwd: e
				}

				placeAnOrderByAmount(reqPlaceAnOrderObject).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					uni.$showMsg('下单成功！');

					uni.switchTab({
						url: '/pages/main/cart/cart'
					})
				})

			},

			//跳转聊天页面
			gotoChat() {
				this.$isLoginByVisitor()
				if (!uni.getStorageSync('isVisitorLogin')) {
					return
				}

				var req = {
					id: parseInt(this.reqData.releaseUserId),
					nickname: this.reqData.releaseUserName,
					head: this.reqData.releaseUserHead,
					type: 2 //用户单聊类型
				}
				//console.log(req)


				// uni.navigateTo({
				// 	url: '/pages/newMsg/chat-user/chat-user?msgObject=' + JSON.stringify(req),
				// })

				uni.navigateTo({
					url: '/pages/newMsg/chat-user/chat-user?msgObject=' + JSON.stringify(req),
				})
			}
		},
		onLoad(e) {
			this.reqData = JSON.parse(e.reqData)
		}
	}
</script>

<style lang="scss" scoped>
	.con {
		width: 88%;
		margin-left: 4%;
		// box-shadow: 0 0px 4px #ddd;
		padding: 2%;
		border-radius: 30rpx;
		margin-bottom: 30rpx;

		.con-title {
			display: flex;

			.con-title-img {
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin: 0 20rpx;
				}
			}

			.con-title-center {
				.name {
					font-size: 28rpx;
				}

				.address {
					font-size: 22rpx;
					color: rgba(166, 166, 166, 1);
				}
			}

		}

		.con-price {
			text {
				margin-left: 20rpx;
				font-size: 36rpx;
				color: rgba(212, 48, 48, 1);
			}
		}

		.con-head {
			font-size: 32rpx;
		}

		.con-detail-imgs {
			image {
				width: 100%;
				margin: 20rpx;
			}
		}
	}

	.bottom-zw {
		width: 100%;
		height: 120rpx;
	}

	.bottom {
		width: 100%;
		display: flex;
		position: fixed;
		z-index: 9;
		left: 0;
		bottom: 0;
		height: 120rpx;

		.left-btn {
			width: 40%;
			margin-left: 5%;
			height: 80rpx;
			border-radius: 50rpx;
			background-color: rgba(10, 163, 71, 1);
			display: flex;
			justify-content: center;

			.btn-img {
				image {
					width: 40rpx;
					height: 40rpx;
					margin-top: 20rpx;
					margin-right: 10rpx;
				}
			}

			.btn-text {
				line-height: 80rpx;

				text {
					font-size: 32rpx;
					color: #fff;
				}
			}
		}

		.right-btn {
			width: 40%;
			margin-left: 10%;
			height: 80rpx;
			border-radius: 50rpx;
			background-color: rgba(10, 163, 71, 1);
			line-height: 80rpx;
			text-align: center;

			text {
				color: #fff;
				font-size: 32rpx;
			}
		}
	}
</style>